<template>
  <div class="comment comm-box layout">
    <div class="hd">
      <h2 class="fl">楼盘评论</h2>
      <span class="fr list tab">
        <!-- <span class="span">查看更多</span> -->
      </span>
    </div>
    <div class="comment-list">
      <ul>
        <li class="comment-content-item" v-for="(item,index) in list" :key="index">
          <img
            src="//s1.ljcdn.com/kepler/static/dist/pages/pinglun/img/userpic.png"
            alt=""
            class="avatar"
          />
          <div class="content-wrapper">
            <div class="name-wrapper">
              <span class="name">游客178****2820</span>
              <i class="real-saw"></i>
            </div>

            <div class="text" data-text="楼盘不错，值得推荐。">
              <div class="text-top">{{item.comment}}</div>
              <div class="text-hidden">楼盘不错，值得推荐。</div>
            </div>
            <div class="time-and-love">
              <div class="time">{{item.created_at}}</div>
              <div class="love">
                <span class="comment-button"> 评论 0 </span>
                <span class="comment-button"> 点赞 0 </span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { defineComponent ,reactive} from "vue";
import { useStore } from "vuex";
export default defineComponent({
  props: {
      list: Array
  },
  setup(props) {


    return {
    };
  },
});
</script>

<style lang="scss">
.comment {
  position: relative;
  margin: 60px 0;
  background-color: #fff;
  .hd {
    height: 50px;
    border-bottom: 1px solid #efefef;
    display: flex;
    justify-content: space-between;
    margin: 0;

    h2 {
      font-size: 24px;
      font-weight: bold;
      line-height: 24px;
    }
    .tab {
      .span {
        display: inline-block;
        height: 24px;
        line-height: 24px;
        margin-left: 33px;
        color: #9b9b9b;
        cursor: pointer;
        font-size: 14px;
      }
      .on {
        color: #e03236;
      }
    }
  }

  .comment-list {
    ul {
      li {
        cursor: pointer;
        border-bottom: 1px solid #f1f1f1;
        padding: 30px 0;
        border-bottom: 1px solid #efefef;
        color: #333;
        display: flex;
        .avatar {
          width: 56px;
          height: 56px;
          margin-right: 23px;
          border-radius: 100%;
        }
        .content-wrapper {
          position: relative;
          .name-wrapper {
            .name {
              margin-right: 15px;
              font-size: 16px;
              color: #394043;
              line-height: 22px;
              font-weight: 700;
              vertical-align: middle;
            }
          }
          .text {
            position: relative;
            font-size: 14px;
            color: #394043;
            line-height: 23px;
            margin-top: 10px;
            max-height: 92px;
            overflow: hidden;
            color: #394043;
            white-space: pre-wrap;
          }
          .time-and-love {
            width: 100%;
            margin-top: 18px;
            display: flex;
            justify-content: space-between;
            .time {
              font-size: 12px;
              color: #9c9fa1;
              line-height: 24px;
              height: 24px;
            }
            .love {
              .comment-button {
                position: relative;
                display: inline-block;
                margin-left: 10px;
                padding: 0 11px;
                height: 22px;
                border: 1px solid #9c9fa1;
                border-radius: 100px;
                cursor: pointer;
                font-size: 11px;
                color: #9c9fa1;
                line-height: 20px;
                vertical-align: middle;
              }
            }
          }
        }
      }
    }
  }
}
</style>